<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/res/css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{/res/css/admin.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/myplugs/js/plugs.js}"></script>
</head>

<body>
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">参数管理</strong>
            <small></small>
        </div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">
                    <button type="button" class="am-btn am-btn-default" onclick="add()"><span class="am-icon-plus"></span> 新增</button>
                </div>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">

        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-input-group am-input-group-sm">
                <input type="text" class="am-form-field" id="search" placeholder="请输入要查找的参数主键">
                <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" onclick="search()">搜索</button>
          </span>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-id">序号</th>
                        <th class="table-type">参数主键</th>
                        <th class="table-type">参数值</th>
                        <th class="table-type">参数说明</th>
                        <th class="table-set">操作</th>
                    </tr>
                    </thead>

                    <tbody id="mytable"></tbody>
                </table>

                <div class="am-cf">
                    共<a><span id="listcount"></span></a>条记录
                    <!--<div class="am-fr">
                        <ul class="am-pagination">
                            <li class="am-disabled">
                                <a href="#">«</a>
                            </li>
                            <li class="am-active">
                                <a href="#">1</a>
                            </li>
                            <li>
                                <a href="#">2</a>
                            </li>
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">»</a>
                            </li>
                        </ul>
                    </div>-->
                </div>
                <hr>
            </form>
        </div>
    </div>
</div>
</body>

<script>
    //保存查询的结果列表
    var list="";
    //页面数据初始化
    $(function(){
        var $tbody=$("#mytable");//表格
        $.ajax({
            type:'post',
            url:'/parameter/getParList',
            data:{},
            dataType:'json',
            success:function (mydata) {
                list=mydata;
                var newHtml='';
                $("#listcount").html(" "+mydata.length+" ");
                for(i=0;i<mydata.length;i++){
                    newHtml+='<tr class="low-'+ i +'">';
                    newHtml+='  <td>'+parseInt(i+1)+'</td>';
                    newHtml+='  <td>'+mydata[i].paramPk+'</td>';
                    newHtml+='  <td>'+mydata[i].paramValue+'</td>';
                    newHtml+='  <td>'+mydata[i].paramDescription+'</td>';
                    newHtml+='  <td>';
                    newHtml+='      <div class="am-btn-toolbar">';
                    newHtml+='          <div class="am-btn-group am-btn-group-xs">';
                    newHtml+='              <a href="#" class="am-btn am-btn-default" onclick="edit('+i+')"><span class="am-icon-pencil-square-o"></span> 编辑 </a>';
                    newHtml+='              <a href="#" class="am-btn am-btn-default" onclick="del('+i+')"><span class="am-icon-trash-o"></span> 删除 </a>';
                    newHtml+='          </div>';
                    newHtml+='      </div>';
                    newHtml+='  </td>';
                    newHtml+='</tr>';
                }
                $tbody.html(newHtml);
            },
            error:function () {
                alert("error");
            }
        })
    })

    //新增记录
    function add() {
        $.jq_Panel({
            title: "新增参数",
            iframeWidth: 500,
            iframeHeight: 230,
            url: "/addPara"
        });
    }

    //编辑动态表格的每一条记录
    function edit(i) {
        var id=list[i].id;
        var pk=list[i].paramPk;
        var value=list[i].paramValue;
        var desc=list[i].paramDescription;
        $.jq_Panel({
            title: "修改参数",
            iframeWidth: 500,
            iframeHeight: 230,
            url: "/editPara?id="+id+"&pk="+pk+"&pv="+value+"&pd="+desc
        });
    }

    //删除动态表格的一条记录
    function del(i){
        var id=list[i].id;
        $.ajax({
            type: 'get',
            url: '/parameter/delete',
            data: {id:id},
            dataType: 'text',
            success: function (mydata) {
                alert(mydata);
            },
            error: function () {
                alert("请求失败");
            }
        });
        //刷新页面
        window.location.reload();
    };

    //查找符合条件的记录
    function search() {
        //表格
        var $tbody = $("#mytable");

        //获取搜索条件
        var pk=document.getElementById("search").value;

        $.ajax({
            type: 'post',
            url: '/parameter/selectByPk',
            data: {pk:pk},
            dataType: 'json',
            success: function (mydata) {
                list=mydata;
                var newHtml='';
                $("#listcount").html(" "+mydata.length+" ");
                for(i=0;i<mydata.length;i++){
                    newHtml+='<tr class="low-'+ i +'">';
                    newHtml+='  <td>'+parseInt(i+1)+'</td>';
                    newHtml+='  <td>'+mydata[i].paramPk+'</td>';
                    newHtml+='  <td>'+mydata[i].paramValue+'</td>';
                    newHtml+='  <td>'+mydata[i].paramDescription+'</td>';
                    newHtml+='  <td>';
                    newHtml+='      <div class="am-btn-toolbar">';
                    newHtml+='          <div class="am-btn-group am-btn-group-xs">';
                    newHtml+='              <a href="#" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="edit('+i+')"><span class="am-icon-pencil-square-o"></span> 编辑 </a>';
                    newHtml+='              <a href="#" class="am-btn am-btn-default am-btn-xs am-text-danger" onclick="del('+i+')"><span class="am-icon-trash-o"></span> 删除 </a>';
                    newHtml+='          </div>';
                    newHtml+='      </div>';
                    newHtml+='  </td>';
                    newHtml+='</tr>';
                }
                $tbody.html(newHtml);
            },
            error: function () {
                alert("请求失败");
            }
        })
    };
</script>
</html>